<template>
  <div class="app-container">
    <el-card shadow="never" class="main-head">
      <div class="main-title" style="font-size: 16px">数据表信息</div>
      <div class="main-contianer">
        <div class="card-img"></div>
        <div class="main-msg">
          <div class="msg-name">{{ clearData.tableName }}</div>
          <div class="msg-date">
            {{ clearData.createTime }}
            {{ clearData.createBy == null ? "陈三" : clearData.createBy }}
          </div>
          <div class="msg-detail">
            行数：{{ this.clearData.total }} | 血缘ID：{{
              this.clearData.dataSource
            }}
            | 数据保存位置：{{ this.clearData.storeLoc }}
          </div>
        </div>
      </div>
    </el-card>

    <el-card shadow="never" class="table-card">
      <div
        v-if="
          this.clearData.schemaId != 3 &&
          this.clearData.schemaId != 7 &&
          this.clearData.schemaId != 8
        "
      >
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ 'font-size': '17px' }"
          style="width: 100%; font-size: 17px"
        >
          <el-table-column
            :prop="item"
            :label="item"
            align="center"
            class="tableItem"
            :width="item == 'id' ? 80 : 180"
            :fixed="item == 'id' ? true : false"
            v-for="(item, index) in headerMsg"
            :key="index"
          >
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        <cardList
          :val="val"
          v-for="(item, index) in tableData"
          :key="index"
          :dtIdx="index"
          :table-data="item"
        ></cardList>
      </div>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="sizes,prev, pager, next"
      :total="datatotal"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getTableList } from "@/api/burnPower/interface";
import cardList from "@/views/components/card-list/index.vue";
export default {
  components: {
    cardList,
  },
  name: "inputDetail",
  data() {
    return {
      clearData: {},
      tableData: [],
      field: [],
      headerMsg: [], //表头信息，
      datatotal: null, //底部数据总数
      pageSize: 5,
      page: 1,
      val: [],
    };
  },
  created() {},
  mounted() {
    this.clearData = this.$route.query;
    this.val = this.clearData;
    this.getClearData();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getClearData();
    },
    handleCurrentChange(o) {
      this.page = o;
      console.log(o);
      this.getClearData();
    },
    getheaderMsg() {
      if (this.headerMsg.length == 0) {
        for (const key in this.tableData[0]) {
          this.headerMsg.push(key);
        }
      }
      console.log(this.headerMsg);
      if (this.field.length == 0) {
        for (const key in this.tableData[0]) {
          this.field.push({
            value: key,
            label: key,
          });
        }
      }
    },
    getClearData() {
      console.log(this.clearData.id, "id");
      getTableList(this.clearData.id, this.page, this.pageSize).then((res) => {
        this.tableData = res.data;
        this.datatotal = Number.parseInt(res.total);
        this.getheaderMsg();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 14px 16px;
}
.main-head {
  position: relative;
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  height: 150px;
  background: #ffffff;
  border-radius: 8px;
  opacity: 1;
  .main-title {
    // position: absolute;
    // top: 14px;
    font-size: 14px;

    font-weight: 400;
    color: #999999;
    line-height: 14px;
  }
  .main-contianer {
    margin-top: 13px;
    .card-img {
      display: inline-block;
      width: 32px;
      height: 32px;
      margin-right: 7px;
      background: url("./icon.png");
      background-size: cover;
    }
    .main-msg {
      display: inline-block;
      vertical-align: top;
      .msg-name {
        height: 18px;
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        line-height: 17px;
        margin-bottom: 16px;
      }
      .msg-date {
        height: 16px;
        font-size: 15px;
        font-weight: 300;
        color: #999999;
        line-height: 16px;
        margin-bottom: 20px;
      }
      .msg-detail {
        margin-top: 3px;
        height: 18px;
        font-size: 16px;

        font-weight: 400;
        color: #666666;
        line-height: 15px;
      }
    }
  }
}
.table-card {
  min-width: 1152px;
  margin: 0 1.5rem 0.6875rem 0;
  // height: 611px;
  background: #ffffff;
  border-radius: 8px;
  margin-top: 16px;
}
</style>
